/*
 *	简易版基于jquery的图片懒加载 - 需先引入jquery
 *	使用：
 *	<div class="imgbox"> 
 *		<img data-src="http://carnt.carnettong.com:8088/CARNT/act/images/6CarExhibition/product1.png" src="https://m.360buyimg.com/cms/jfs/t2218/111/2490744834/43/9acceab1/56d55ce6N5a567661.gif" alt="">
 *	</div>
 *	父元素需要有className - imgbox
 *	imgbox需要设置宽 - 具体为图片所需宽
 *	imgbox 内直接放置img标签
 *	img宽度设置为100%
 *	需要加载的图片放置在data-src属性中
 *	默认图片放置于src中
 *
 *	此处已监听window的滚动注意 参数 - runfnc - 为函数形式
 *	若需重复定义滚动事件 则 需将执行的函数作为参数传入 - lazyLoadImg - 中
 *	不可定义第二个滚动事件！
 */
function lazyLoadImg (runfnc){
	var timer = null;
	var imgbox = $('.imgbox');
	
	$(window).on('scroll',function () {
		clearTimeout(timer);
		timer = setTimeout(function(){
			// 执行传入的函数
			if ( runfnc && typeof runfnc == 'function') {
				runfnc();
			}
			lazyImg();
		},50);
	})

	function lazyImg(){
		var winHei = $(window).height(),
		winScrollTop  = $(window).scrollTop();

		imgbox.each(function(e,i){
			var thisTop = $(this).offset().top,
			imgSrc = $(this).find('img');
			if (winScrollTop > thisTop - (winHei + 100) ) {
				if ( imgSrc.data('src') != '' ) {
					var image = new Image();
					image.src = imgSrc.data('src');
					image.onload = function () {
						// console.log(imgSrc.data('src'))
						imgSrc.attr('src',imgSrc.data('src'));
						imgSrc.data('src','');
						imgSrc.addClass('active');
					}

				}
			}
		})

	}
	// 手动执行一下保证加载时正常显示图片
	lazyImg();
}
